<template>
	<div class="top_item">
		<el-tooltip class="item" effect="dark" content="用户头像" placement="bottom">
			<span class="user-pic">
				<img src="/static/img/user_pic.jpg" alt="">
			</span>
		</el-tooltip>
		<el-dropdown @command="handleCommand">
		  <span class="el-dropdown-link">
		    admin<i class="el-icon-arrow-down el-icon--right"></i>
		  </span>
		  <el-dropdown-menu slot="dropdown">
		    <el-dropdown-item command="info">个人信息</el-dropdown-item>
		    <!-- <el-dropdown-item command="gitee">码云地址</el-dropdown-item> -->
		    <li style="background:#e4e7ed;height:1px;"></li>
		    <el-dropdown-item command="exit">退出登录</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
	</div>
</template>
<script>
	export default{
		name:'TopColor',
		data(){
			return {
				
			}
		},
		methods:{
			handleCommand(val){
				if(val == 'info'){
					this.$router.push('/personal/info')
				}else if(val == 'gitee'){

				}else{
					this.logout();
				}
			},
			logout () {
		      this.$confirm("此操作将退出系统, 是否继续?", "提示", {
		        confirmButtonText: "确定",
		        cancelButtonText: "取消",
		        type: "warning"
		      }).then(() => {
		        this.$store.dispatch("LogOut").then(() => {
		          this.$router.push({ path: "/login" });
		        });
		      }).catch(()=>{
		      	this.$message({
		            type: 'info',
		            message: '已取消退出'
		          });
		      })
		    }
		}
	}
</script>
<style scoped>
	.top_item{
		/*display: flex;*/
		position: relative;
		padding-left:36px;
	}
	.user-pic{
		position: absolute;
		display: inline-block;
		width:22px;
		height:22px;
		line-height: 22px;
		/*padding:2px;*/
		left:2px;
		top:4px;
		text-align: center;
		border:2px solid #d8d7c5;
		border-radius:50%;
		margin-right:5px;
		overflow:hidden;
	}
	.user-pic img{
		width:100%;
		height:100%;
	}
</style>